<template>
  <el-dialog v-model="show" title="用户信息" width="700" class="p-r-10" :draggable="true" :close-on-click-modal="false">
    <el-row>
      <el-col :span="14">
        <el-row class="m-t-20 m-b-10">
          <el-col :span="2"></el-col>
          <el-col :span="4">账号：</el-col>
          <el-col :span="18">{{account}}</el-col>
        </el-row>

        <el-row class="m-b-10">
          <el-col :span="2"></el-col>
          <el-col :span="4">姓名：</el-col>
          <el-col :span="18">{{name}}</el-col>
        </el-row>

        <el-row class="m-b-10">
          <el-col :span="2"></el-col>
          <el-col :span="4">电话：</el-col>
          <el-col :span="18">{{phone}}</el-col>
        </el-row>
        <el-row class="m-b-10">
          <el-col :span="2"></el-col>
          <el-col :span="4">性别：</el-col>
          <el-col :span="18" v-if="gender==0">未知</el-col>
          <el-col :span="18" v-if="gender==1">男</el-col>
          <el-col :span="18" v-if="gender==2">女</el-col>
        </el-row>

        <el-row class="m-b-10">
          <el-col :span="2"></el-col>
          <el-col :span="4">邮箱：</el-col>
          <el-col :span="18">{{email}}</el-col>
        </el-row>

        <el-row class="m-b-10">
          <el-col :span="2"></el-col>
          <el-col :span="4">备注：</el-col>
          <el-col :span="18">{{remark}}</el-col>
        </el-row>

        <el-row class="m-b-10">
          <el-col :span="2"></el-col>
          <el-col :span="4">部门：</el-col>
          <el-col :span="18" class="center-vertical">
            <el-breadcrumb v-if="depts!=null && depts.length>0">
              <el-breadcrumb-item v-for="(dept,index) in depts" :key="index">{{dept.name}}</el-breadcrumb-item>
            </el-breadcrumb>
          </el-col>
        </el-row>

        <el-row class="m-b-10">
          <el-col :span="2"></el-col>
          <el-col :span="4">岗位：</el-col>
          <el-col :span="18" class="center-vertical">
            <el-breadcrumb v-if="posts!=null && posts.length>0">
              <el-breadcrumb-item v-for="(post,index) in posts" :key="index">{{post.name}}</el-breadcrumb-item>
            </el-breadcrumb>
          </el-col>
        </el-row>

        <el-row class="m-b-30"></el-row>
      </el-col>
      <el-col :span="10">
        <img class="avator" @click.stop="handlePreview" :src="$getAvatar(avator)" />
        <!-- 图片预览 -->
        <el-image-viewer
            v-if="showImagePreview"
            :zoom-rate="1.2"
            @close="closePreview"
            :url-list="[$getAvatar(avator)]"/>

        <el-row class="m-t-20">
          <el-button type="primary" plain @click.stop="editPwd">修改密码</el-button>
        </el-row>
      </el-col>
    </el-row>

    <editPassword ref="editPasswordComp"/>
  </el-dialog>
</template>

<script lang="ts" setup>
import {ref, defineExpose, inject, computed} from "vue"
import editPassword from './edit_password.vue'

const $api = inject('$api')
const $post = inject('$post')
const show = ref(false)
const id = ref("")
const account = ref("")
const name = ref("")
const phone = ref("")
const avator = ref("")
const showImagePreview = ref(false)
const gender = ref(0)
const email = ref("")
const remark = ref("")
const depts = ref([])
const posts = ref([])

const editPasswordComp = ref(null)

function showComp(){
  show.value = true

  $post($api.profileDetail).then((res:any)=>{
    id.value = res.data.result.user.id
    account.value = res.data.result.user.account
    name.value = res.data.result.user.name
    phone.value = res.data.result.user.phone
    avator.value = res.data.result.user.avator
    gender.value = res.data.result.user.gender
    email.value = res.data.result.user.email
    remark.value = res.data.result.user.remark

    depts.value = res.data.result.depts
    posts.value = res.data.result.posts
  })

}
function hideComp(){
  show.value = false
}

function closePreview(){
  showImagePreview.value = false
}

function handlePreview(){
  showImagePreview.value = true
}

function editPwd(){
  editPasswordComp.value.showComp(id.value)
}

defineExpose({
  showComp,
})
</script>

<style lang="scss" scoped>
.avator{
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 5px;
  cursor: pointer;
}
</style>
